<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售</title>
    <link href="static/css/style.css" rel="stylesheet">
    <script src="static/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <header class="header">
        <a href="#" class="back-btn">返回</a>
        <h1 class="header-title">销售</h1>
    </header>

    <div class="filter-bar">
        <div class="select-box">
            <div class="select-display">
                <span>选择服务区</span>
                <span>▼</span>
            </div>
            <div class="select-options">
                <div class="select-option">选择全部服务区</div>
                <div class="select-option parent">
                    <div class="parent-title">燕赵分公司</div>
                    <div class="child-box">
                        <div class="select-option child">山海关服务区</div>
                        <div class="select-option child">迁安服务区</div>
                        <div class="select-option child">深圳服务区</div>
                    </div>
                </div>
                <div class="select-option parent">
                    <div class="parent-title">燕赵分公司</div>
                    <div class="child-box">
                        <div class="select-option child">山海关服务区</div>
                        <div class="select-option child">迁安服务区</div>
                        <div class="select-option child">深圳服务区</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="time-filters">
            <button class="time-filter">本年</button>
            <button class="time-filter">本月</button>
            <button class="time-filter">本周</button>
            <button class="time-filter active">上日</button>
        </div>
    </div>

    <div class="total-flow">
        总销售 <span class="total-number">28372</span><span class="unit">单位：万元</span>
    </div>

    <div class="chart-container"> 
        <div class="chart-title">业态销售占比</div>
        <div class="pie-md6-box">
            <div class="pie-md6">
                <div id="pieChart"></div>
            </div>
            <div class="pie-md6">
                <div class="pie-legend">
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #26a69a;"></span>
                        <span class="legend-label">油站</span>
                        <span class="legend-number">1048</span>
                        <span class="legend-percentage">20%</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #ff9800;"></span>
                        <span class="legend-label">加气</span>
                        <span class="legend-number">735</span>
                        <span class="legend-percentage">15%</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #00bcd4;"></span>
                        <span class="legend-label">充电</span>
                        <span class="legend-number">580</span>
                        <span class="legend-percentage">10%</span>
                    </div>
                    <div class="legend-item">                               
                        <span class="legend-color" style="background-color: #4caf50;"></span>
                        <span class="legend-label">超市</span>
                        <span class="legend-number">484</span>
                        <span class="legend-percentage">8%</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #ff5722;"></span>
                        <span class="legend-label">餐厅</span>
                        <span class="legend-number">300</span>
                        <span class="legend-percentage">6%</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #9c27b0;"></span>
                        <span class="legend-label">客房</span>
                        <span class="legend-number">200</span>
                        <span class="legend-percentage">4%</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #607d8b;"></span>
                        <span class="legend-label">物业</span>
                        <span class="legend-number">189</span>
                        <span class="legend-percentage">4%</span>
                    </div>                                  
                </div>
            </div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-title">经营目标完成</div>
        <div class="gauge-grid">
            <div class="gauge-item2">
                <div class="gauge-chart" id="gauge"></div>
                <div class="gauge-right-list">
                    <div class="gauge-right-item">完成率:80%</div>
                    <div class="gauge-right-item">完成率:80%</div>
                    <div class="gauge-right-item">总目标:80%</div>
                </div>
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
                
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
               
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
                
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
                
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
                
            </div>
            <div class="gauge-item">
                <div class="layui-ybiao layui-ybiao-sm">
                    <div class="ybiao-points" id="ybiao" style="transform:rotate(-15deg)">
                        <div class="ybiao-point-red"></div>
                        <div class="ybiao-point-tran"></div>
                    </div>
                    <div class="ybiao-rb">
                        <div class="ybiao-rb-text">50%</div>
                        <div class="ybiao-rb-text">物业销售</div>
                    </div>
                    <div class="layui-ybiao-remark">
                        <div>目标：192</div>
                        <div>完成：192</div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-title">当年经营趋势</div>
        <div id="chart-title-sm-list">
            <div class="chart-title-sm">全部</div>
            <div class="chart-title-sm">油站</div>
            <div class="chart-title-sm">加气</div>
            <div class="chart-title-sm">充电</div>
            <div class="chart-title-sm">超市</div>
            <div class="chart-title-sm">餐厅</div>
            <div class="chart-title-sm select">客房</div>
            <div class="chart-title-sm">物业</div>
        </div>
        <div id="lineChart"></div>
    </div>

    <!-- 添加服务区业态数据展示 -->
    <div class="service-area">
        <div class="area-header">
            <span class="area-name">山海关服务区北区</span>
            <span class="area-total">1382</span>
        </div>
        <div class="business-grid">
            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/youzhan.png" class="business-icon" alt="充电">
                    <div class="business-label">充电</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>

            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/jiaqi.png" class="business-icon" alt="充电">
                    <div class="business-label">加气</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>

            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/chongdian.png" class="business-icon" alt="充电">
                    <div class="business-label">充电</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>

            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/chaoshi.png" class="business-icon" alt="充电">
                    <div class="business-label">超市</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>

            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/canting.png" class="business-icon" alt="充电"> 
                    <div class="business-label">餐厅</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>

            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/kefang.png" class="business-icon" alt="充电">
                    <div class="business-label">客房</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>

            <div class="business-item-dir">
                <div class="business-left">
                    <img src="static/img/wuye.png" class="business-icon" alt="充电">
                    <div class="business-label">物业</div>
                </div>
                <div class="business-right">
                    <div class="business-value">完成：80%</div>
                    <div class="business-value">销售：192</div>
                    <div class="business-value">目标：192</div>
                </div>
            </div>
        </div>
    </div>

<!-- 添加服务区业态数据展示 -->
<div class="service-area">
    <div class="area-header">
        <span class="area-name">滦州服务区北区</span>
        <span class="area-total">1382</span>
    </div>
    <div class="business-grid">
        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/youzhan.png" class="business-icon" alt="充电">
                <div class="business-label">充电</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>

        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/jiaqi.png" class="business-icon" alt="充电">
                <div class="business-label">加气</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>

        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/chongdian.png" class="business-icon" alt="充电">
                <div class="business-label">充电</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>

        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/chaoshi.png" class="business-icon" alt="充电">
                <div class="business-label">超市</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>

        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/canting.png" class="business-icon" alt="充电"> 
                <div class="business-label">餐厅</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>

        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/kefang.png" class="business-icon" alt="充电">
                <div class="business-label">客房</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>

        <div class="business-item-dir">
            <div class="business-left">
                <img src="static/img/wuye.png" class="business-icon" alt="充电">
                <div class="business-label">物业</div>
            </div>
            <div class="business-right">
                <div class="business-value">完成：80%</div>
                <div class="business-value">销售：192</div>
                <div class="business-value">目标：192</div>
            </div>
        </div>
    </div>
</div>

    <script src="static/js/common.js"></script>
    <script>
        // 初始化图表
        const pieChart = echarts.init(document.getElementById('pieChart'));
        const lineChart = echarts.init(document.getElementById('lineChart'));
        const gaugeCharts = echarts.init(document.getElementById('gauge'));
       

        // 饼图配置
        const pieOption = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                name: '业态销售占比',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '油站' },
                    { value: 735, name: '加气' },
                    { value: 580, name: '充电' },
                    { value: 484, name: '超市' },
                    { value: 300, name: '餐厅' },
                    { value: 200, name: '客房' },
                    { value: 189, name: '物业' },
                ]
                }
            ]
            };

        // 仪表盘配置
        const gaugeOption = {

            series: [{
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '90%',
                center:['30%', '70%'],
                itemStyle: {
                    color: '#FB4D8F'
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 8
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 8,
                        color: [
                            [0, '#34BAC6'],
                            [1, '#34BAC6']
                        ]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                title: {
                    show: true,
                    offsetCenter: [0, '20%'],
                    fontSize: 12
                },
                detail: {
                    fontSize: 14,
                    offsetCenter: [0, '-10%'],
                    formatter: '{value}%'
                },
                data: [{
                    value: 20,
                    name: '已完成'
                }]
            }]
        };

        // 折线图配置
        const lineOption = {
            xAxis: {
                type: 'category',
                data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [20, 32, 18, 34, 22, 30, 25, 22, 30, 25, 20, 28],
                type: 'line',
                smooth: true,
                itemStyle: {
                    color: '#26a69a'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(38, 166, 154, 0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(38, 166, 154, 0)'
                        }]
                    }
                }
            }]
        };

        // 渲染图表
        pieChart.setOption(pieOption);
        lineChart.setOption(lineOption);
        gaugeCharts.setOption(gaugeOption);

        // 响应式处理
        window.addEventListener('resize', function() {
            pieChart.resize();
            lineChart.resize();
            gaugeCharts.resize();
        });
    </script>
</body>
</html>